<template>
	<view class="talent">
		<view>
			<u-tabs-swiper  :list="list" ref="tabs" :height="100" :is-scroll="false" :bold="false" :current="current" @change="tabsChange" active-color="#de4f38" :bar-width="80" :bar-height="6"></u-tabs-swiper >
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box" >
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<TalentList :list="talentList"></TalentList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<TalentList :list="talentList"></TalentList>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import TalentList from '../components/talent-list/index.vue'
	export default {
		components: {
			TalentList
		},
		data() {
			return {
				list: [{
					name: '收藏达人'
				}, {
					name: '合作达人'
				}],
				current: 0,
				swiperCurrent: 0, 
				talentList: [
					{
						id: 1,
						title: '名字名字',
						url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
						image_url: require('@/static/icons/xiaohongshu_icon.png'),
						fans_num: '6.8',
						price: '500',
						location: '杭州'
					},
					{
						id: 2,
						title: '名字名字',
						url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
						image_url: require('@/static/icons/xiaohongshu_icon.png'),
						fans_num: '6.8',
						price: '500',
						location: '杭州'
					}
				]
			};
		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom() {
				
			}
		}
	};
</script>

<style lang="scss" scoped>
.talent {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	.swiper-box {
		flex: 1;
		.swiper-item {
			height: 100%;
		}
	}
	
	
}
</style>
